import * as React from 'react';
import { partial, invoke, get } from 'lodash';
import { Tooltip, Button } from 'antd';

import Test from '../Test';
import EditKnowledge from '../common/EditKnowledge';
import EditImage from '../common/EditImage';

export default class Tpl4 extends React.Component {
  RefEditImage: any;
  renderContent = (testProps: any, testOwnProps: any) => {
    const { handleUpdateKnowledge } = testOwnProps;
    const { lessonId, testProfile, updateTest, fetchTestDetail } = testProps;
    const { content } = testProfile;
    const knowledgeId = get(content, 'knowledgeId', 0);

    return (
      <div>
        <EditKnowledge
          showImage={true}
          lessonId={lessonId}
          knowledgeId={knowledgeId}
          handleUpdateKnowledge={handleUpdateKnowledge}
        />
        {this.renderWrongOptions(testProfile, updateTest, fetchTestDetail)}
      </div>
    );
  };

  renderWrongOptions(testProfile: any, updateTest: any, fetchTestDetail: any) {
    const options = get(testProfile, 'content.options', []);
    return (
      <div className="text-center test-parser-sub-title">
        <h4 className="text-left test-parser-sub-title">
          混淆卡片&nbsp;&nbsp;
          {this.renderAction(options.length > 0)}
        </h4>
        <EditImage
          selectMax={1}
          images={options}
          handleCallback={(options: any) => {
            let { content } = testProfile;
            content = { ...content, options };
            updateTest({ content }).then(fetchTestDetail);
          }}
          ref={(editImage: any) => {
            this.RefEditImage = editImage;
          }}
        />
      </div>
    );
  }

  renderAction(disabled: boolean) {
    return (
      <Tooltip key="add image" title="添加混淆卡片">
        <Button
          disabled={disabled}
          shape="circle"
          type="primary"
          icon="plus"
          onClick={partial(invoke, this, 'RefEditImage.addImage')}
        />
      </Tooltip>
    );
  }

  render() {
    return <Test {...this.props}>{this.renderContent}</Test>;
  }
}
